import utils from "./utils.js";
import "./common.js"
// import 'animate.css';
// import WOW from "../node_modules/dist/wow.js";
// 引入工具类函数
import { login, getNewAll, getRecruitAll,getRecruitBannerAll,getBannerAll} from "./request.js";
// 调用函数发送请求
(async function () {
  let res = await login();
  let token = res.data.token;
  localStorage.setItem("token", token);

  // 获取全部新闻数据
  let newAllData = await getNewAll();
  let newsItem = newAllData.data.rows;

  // 获取全部 招聘信息 数据
  let recruitAllData = await getRecruitAll();
  let recruitItem = recruitAllData.data.rows;

  // 获取人物志轮播图分组数据
  let recruitBannerAllData = await getRecruitBannerAll();
  let recruitBannerItem = recruitBannerAllData.data.Carousels;

  // 首页百叶窗数据
  let shutterArr = newsItem.filter((item) => {
    return item.sketch === "首页百叶窗";
  });
  winShades(shutterArr);

  // 这就是蚂蚁数据
  let antArr = newsItem.filter((item) => {
    return item.sketch === "这就是蚂蚁";
  });
  ant(antArr);

  // 薪酬与福利数据
  let welfareArr = newsItem.filter((item) => {
    return item.sketch === "薪酬和福利";
  });
  welfareFn(welfareArr);

  // 人物志轮播图数据
  let recruitArr = recruitItem.filter((item) => {
    return item.name === "人物志";
  });
  // 循环合并人物志轮播图数据
  for(let i = 0 ; i<recruitBannerItem.length ; i ++){
     recruitArr[i].url = recruitBannerItem[i].url
  };
  recruitFn(recruitArr);
  // 人物志轮播图左右按钮切换
  let ul = document.querySelector(".card_list_container");
  let beforeItem1 = ul.firstElementChild.cloneNode(true);
  let beforeItem2 = ul.firstElementChild.nextElementSibling.cloneNode(true);
  let backItem1 = ul.lastElementChild.cloneNode(true);
  let backItem2 = ul.lastElementChild.previousElementSibling.cloneNode(true);
  ul.appendChild(beforeItem1);
  ul.appendChild(beforeItem2);
  ul.insertBefore(backItem1,ul.firstElementChild);
  ul.insertBefore(backItem2,ul.firstElementChild);
  let leftBtn = document.querySelector(".card_left_btn");
  let rightBtn = document.querySelector('.card_right_btn');
  let index = 1
  let isClick = true;
  rightBtn.addEventListener('click',function(){
    if(!isClick) return;
      isClick = false;
      index++;
      ul.style.transitionDuration = "0.3s";
      ul.style.transform = `translate(-${50 + index * 50}%)`;
  });
  leftBtn.addEventListener('click',function(){
    if(!isClick) return;
    isClick = false;
    index--;
    ul.style.transitionDuration = "0.3s";
    ul.style.transform = `translate(-${50 + index * 50}%)`;
  });
  ul.addEventListener('transitionend',function(){
    isClick = true;
    if(index > ul.children.length -4){
      index = 1;
      ul.style.transitionDuration = "0s";
      ul.style.transform = `translate(-${50 + index * 50}%)`;
    }
    else if(index < 0){
      index = ul.children.length-5;
      ul.style.transitionDuration = "0s";
      ul.style.transform = `translate(-${50 + index * 50}%)`;
    };
  });

  // 获取全部轮播图数据
  let bannerAllArr = await getBannerAll();
  let bannerAllData = bannerAllArr.data.rows;
  // 获取蚂蚁空间的数据
  let AntBannerArr = bannerAllData.filter((item)=>{
    return  item.id >1086 && item.id <1091; 
  });
  // 获取 环境和氛围 元素
  let enviromentUl = document.querySelector('.main_environment_content > ul');
  // 获取 环境和氛围的 页数盒子变量
  let left_page = document.querySelector('.left_page');
  // 获取 蚂蚁空间 选项盒子变量
  let AntSpace = document.querySelector(".environmentBtn_select > .space");
  // 轮播图图片下标
  let envIndex = 1;
  // 蚂蚁空间盒子渲染
  antSpaceFn(AntBannerArr);

  // 蚂蚁A空间的数据
  let antAData = bannerAllData[2].Carousels;
  envBannerFn(antAData);
  pageFn(antAData);
  // 蚂蚁元空间
  let antYData = bannerAllData[3].Carousels;
  // 蚂蚁S空间
  let antSData = bannerAllData[4].Carousels;
  // 蚂蚁C空间
  let antCData = bannerAllData[5].Carousels;

  // 蚂蚁盒子点击事件
  let antSpace = document.querySelectorAll('.space > p');
  let env_leftBtn = document.querySelector('.env_leftBtn');
  let env_rightBtn = document.querySelector('.env_rightBtn');
  // 自动播放
  let timer = setInterval(moveFn,3000);
  for(let i = 0;i<antSpace.length;i++){
    antSpace[i].addEventListener('click',function(){
      clearInterval(timer);
      if(i == 0){
        envBannerFn(antAData);
        pageFn(antAData);
      };
      if(i == 1){
        envBannerFn(antYData);
        pageFn(antYData);
      }
      if(i == 2){
        envBannerFn(antSData);
        pageFn(antSData);
      }
      if(i == 3){
        envBannerFn(antCData);
        pageFn(antCData);
      }
      envIndex = 1;
      enviromentUl.style.transform = `translate(-${(envIndex-1)*100}%)`;
      timer = setInterval(moveFn,3000);
    });
  };
  enviromentUl.addEventListener('mouseover',function(){
    clearInterval(timer);
  });
  enviromentUl.addEventListener('mouseout',function(){
    timer =  setInterval(moveFn,3000);
  });
  // 环境和氛围左按钮点击事件
  env_leftBtn.addEventListener('click',function(){
    envIndex--;
    enviromentUl.style.transform = `translate(-${(envIndex-1)*100}%)`;
    if(envIndex < 1){
      envIndex=enviromentUl.children.length;
      enviromentUl.style.transform = `translate(-${(envIndex-1)*100}%)`;
    };
    let str = `<span>${envIndex}</span> / ${enviromentUl.children.length}`;
    left_page.innerHTML = str;
  });
  // 环境和氛围右按钮点击事件
  env_rightBtn.addEventListener('click',moveFn);
  function moveFn(){
    envIndex++;
    if(envIndex > enviromentUl.children.length){
      enviromentUl.style.transform = `translate(-${0}%)`;
      envIndex=1;
    };
    enviromentUl.style.transform = `translate(-${(envIndex-1)*100}%)`;
    let str = `<span>${envIndex}</span> / ${enviromentUl.children.length}`;
    left_page.innerHTML = str;
  };
  // 环境和氛围图片区域 渲染函数
  function envBannerFn(data){
    let str = '';
    data.forEach((item)=>{
      str += `
      <li>
      <img
        src=${item.url}
        alt=""
      />
    </li>
      `;
    });
    enviromentUl.innerHTML = str;
  };
  // 环境和氛围文本 渲染函数
  function pageFn(data){
    let str = `<span>1</span> / ${data.length}`;
    left_page.innerHTML = str;
  };
  // 蚂蚁空间盒子渲染函数
  function antSpaceFn(data){
    let str = '';
    data.forEach((item)=>{
      str += `
      <p>${item.name}</p>
      `;
    });
    AntSpace.innerHTML = str;
  };
})();

// 获取百叶窗元素
let winShade = document.querySelector(".business_item_container");
// 首页百叶窗数据渲染函数
function winShades(data) {
  let str = "";
  data.forEach(function (item) {
    str += `
        <div class="business_item">
        <img
        src=${item.cover}
        alt=""
      />
      <div class="mask"></div>
      <h2>${item.title}</h2>
      <p>
        ${item.content}
      </p>
      <i class="iconfont icon-xialajiantou2"></i>
      </div>`;
  });
  // 百叶窗数据渲染
  winShade.innerHTML += str;
};

// 获取这就是蚂蚁元素
let ants = document.querySelector(".company_overview_container");
// 首页这就是蚂蚁数据渲染函数
function ant(data) {
  let str = "";
  data.forEach((item) => {
    str += `
        <div class="company_overview_item">
        <div class="img_container">
          <img
            src=${item.cover}
            alt=""
          />
        </div>
        <p>${item.title}</p>
        <p>${item.content}</p>
      </div>`;
  });
  // 这就是蚂蚁渲染
  ants.innerHTML += str;
};

// 获取薪酬和福利 元素
let welfare = document.querySelector(".welfare_box");
// 薪酬和福利数据渲染函数
function welfareFn(data) {
  let str = "";
  data.forEach((item) => {
    str += `
    <div class="welfare_item">
                <img src=${item.cover} alt="">
                <div class="text_container">
                  <h2>${item.title}</h2>
                  ${item.content}
                </div>
              </div>
    `;
  });
  welfare.innerHTML = str;
};

// 获取 人物志 元素
let recruit = document.querySelector(".card_list_container");
// 人物志 数据渲染函数
function recruitFn(data) {
  let str = "";
  data.forEach((item) => {
    str += `
    <li>
        <div class="card_item_container">
          <!-- 卡片项目内容 -->
            <div class="card_item_content">
              <!-- 图片区域 -->
                <div class="img_container">
                  <img
                    src=${item.url}
                    alt=""
                  />
                  </div>
                  <!-- 文本区域 -->
                  <div class="text_container">
                    <!-- 职业 -->
                      <p>${item.requirement}</p>
                        <div class="text_item">
                          <!-- 文本内容 -->
                          <div class="text_item_content">
                            <h2>${item.desc}</h2>
                            ${item.salary}
                          </div>
                        </div>
                        <!-- 人物信息块 -->
                        <div class="people_info_bar">
                          <div class="people_info">
                        <div class="job_and_img">
                        <div class="small_img_container">
                        <img
                          src=${item.url}
                          alt=""
                        />
                      </div>
                    <p>${item.address}</p>
                  </div>
                  <button class="pointer">
                    了解更多<i class="iconfont icon-xialajiantou1"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    `;
  });
  recruit.innerHTML = str;
};